<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>闪电下单设置</title>
    <script src="../js/base.js"></script>
</head>
<style type="text/css">
    .top {
        height: 50px;
        line-height: 50px;
        background-color: #424242;
        text-align: center;
    }

    .set_type {
        padding: 10px 15px;
        box-sizing: border-box;
        background-color: #393939;
        margin-bottom: 1px;

    }

    .left_arrow {
        width: 23px;
        height: 25px;
        top: 13px;
        left: 15px;
        background-size: 50%;
        position: absolute;
        background-image: url(../img/arrow_left.png);
        z-index: 100;
    }

    .choose_type {
        outline: none;
        border: none;
        background-color: #393939;
        color: #efefef;
        font-family: arial, "microsoft yahei";
        padding: 0px;
    }

    .count_btn {
        width: 15%;
        border: 1px solid #424242;
        box-sizing: border-box;
    }

    .choosetype {
        background-color: #e1b080;
    }

    .foc_choose {
        width: 20px;
        height: 20px;
        border: 1px solid #999999;
        margin-bottom: -5px;
        margin-right: 6px;
    }

    .focu {
        background-color: #e1b080;
    }

    .set_po {
        padding: 10px 0px;
        border-bottom: 1px solid #424242;
        box-sizing: border-box;
    }

    .point_con {
        width: 30px;
        height: 30px;
        border: 1px solid #EFEFEF;
        border-radius: 2px;
    }

    .po_input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        color: #efefef;
        background-color: #393939;
    }

    .point_btn {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #EFEFEF;
        border-radius: 2px;
        background-color: #e1b080;
    }

    .que_icon {
        margin: 0 10px 10px;
        height: 15px;
        line-height: 15px;
        width: 15px;
        /*border: 1px solid #999999;*/
        border-radius: 12px;
    }

    .set_poo {
        width: 30px;
        height: 18px;
    }

    .point_input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: left;
        color: #efefef;
        border-bottom: 1px solid #999999;
        background-color: #393939;
    }

    .pt15 {
        padding-top: 15px;
    }
</style>
    <body ms-controller="wm">
        <div class="top">
            <span class="left_arrow bgBox" onclick="javascript:history.back(-1);"></span>
            闪电下单设置
        </div>
        <div class="set_type mt10 color999">设置品种
            <select class="choose_type fr">
                <#list products as product>
                    <option value="${product.code}">${product.name}</option>
                </#list>
            </select>
        </div>
        <div class="set_type">
            <div class="order_count hidden">
                <div class="w30 fl color999">交易数量</div>
                <div class="w70 fl hidden tc color999">
                    <div class="count_btn ml10 fr" ms-class-choosetype="Type==1" ms-click="ChooseType(1)">10手</div>
                    <div class="count_btn ml10 fr" ms-class-choosetype="Type==2" ms-click="ChooseType(2)">5手</div>
                    <div class="count_btn ml10 fr" ms-class-choosetype="Type==3" ms-click="ChooseType(3)">3手</div>
                    <div class="count_btn ml10 fr" ms-class-choosetype="Type==4" ms-click="ChooseType(4)">2手</div>
                    <div class="count_btn fr" ms-class-choosetype="Type==5" ms-click="ChooseType(5)">1手</div>
                </div>
            </div>
        </div>
        <div class="set_type">
            <span class="foc_choose inline_block" ms-class-focu="isfocu" ms-click="ChooseFocu"></span>
            <span class="inline_block mr20 color999">触发止盈</span>
            <span class="foc_choose inline_block" ms-class-focu="isfoc" ms-click="ChooseFoc"></span>
            <span class="inline_block color999">不触发止盈</span>
            <div class="set_po f10 hidden">
                <div class="fl">
                        <span class="point_con inline_block tc">
                            <input class="po_input" type="number" maxlength="" placeholder="--" ms-duplex-string="points"/>
                        </span>
                    <span class="point_text inline_block tc color999">点</span>
                    <span class="point_text inline_block tc color999">(--)</span>
                    <span class="point_text inline_block tc color999">触发止盈</span>
                </div>
                <span class="point_btn inline_block tc fr ml10" ms-click="addpoints">+</span>
                <span class="point_btn inline_block tc fr" ms-click="subpoints">-</span>

            </div>
            <div class="set_po f10 hidden">
                <div class="fl">
                        <span class="point_con inline_block tc">
                            <input class="po_input" type="number" maxlength="" placeholder="--" ms-duplex-string="point"/>
                        </span>
                    <span class="point_text inline_block tc color999">点</span>
                    <span class="point_text inline_block tc color999">(--)</span>
                    <span class="point_text inline_block tc color999">触发止盈</span>
                </div>
                <span class="point_btn inline_block tc fr ml10" ms-click="addpoint">+</span>
                <span class="point_btn inline_block tc fr" ms-click="subpoint">-</span>

            </div>
        </div>
        <div class="set_type pt15">
            <span class="foc_choose inline_block" ms-class-focu="isbaob" ms-click="ChooseBao"></span>
            <span class="inline_block color999">移动保本</span>
            <div style="float: right;">
                <span class="inline_block color999">移动点数</span>
                <span class="set_poo inline_block mr10 color999">
                        <input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
                </span>
                <span class="inline_block color999">保本点数</span>
                <span class="set_poo inline_block color999">
                    <input class="point_input" type="number" maxlength="2" ms-duplex-string="usermobile"/>
                </span>
            </div>
        </div>
        <div class="btnBox mt30">
            <div class="bgcolor_ora color_ef br5 tc">确定</div>
        </div>
    </body>
<script type="text/javascript">
    var o;
    avalon.ready(function () {
        o = avalon.define({
            $id: "wm",
            Type: -1,
            isfoc: false,
            isfocu: false,
            isbaob: false,
            points: 0,
            point: 0,
            ChooseFocu: function () {
                o.isfocu = !o.isfocu;
            },
            ChooseFoc: function () {
                o.isfoc = !o.isfoc;
            },
            ChooseBao: function () {
                o.isbaob = !o.isbaob;
            },
            ChooseType: function (tabId) {
                o.Type = tabId;
            },
            addpoint: function () {
                o.point += 1;
            },
            subpoint: function () {
                if (o.point < 1) {
                    return;
                } else {
                    o.point -= 1;
                }

            },
            addpoints: function () {
                o.points += 1;
            },
            subpoints: function () {
                if (o.points < 1) {
                    return;
                } else {
                    o.points -= 1;
                }

            }
        });
        avalon.scan(document.body);
    })
</script>
</html>
